<template>
  <el-table
    :ref="refTable"
    :data="list"
    :border="border"
    :width="width"
    :height="height"
    :default-sort="defaultSort"
    @sort-change="sortChange"
    @cell-dblclick="cellDblclick"
    @selection-change="handleSelectionChange"
    :maxHeight="maxHeight"
    :row-class-name="tableRowClassName || defaultClassName"
    :cell-style="cellStyle"
    :show-header="showHeader" 
    :fit="fit"
    :size="size"
    v-loading="loading"
  >
    <template v-for="item in columns">
      <!-- 操作列/自定义列 -->
      <slot v-if="item.slot" :name="item.slot"></slot>
      <el-table-column
        v-else
        :key="item.prop"
        :type="item.type"
        :prop="item.prop"
        :sortable="item.sortable"
        :sort-method="item.sortByitem"
        :label="item.label"
        :align="item.align || 'left'"
        :header-align="item.headerAlign || 'left'"
        :show-overflow-tooltip="item.tooltip || false"
        :min-width="item.minWidth"
        :width="item.width"
        :fixed="item.fixed"
        :class-name="item.columnClass"
        :label-class-name="item.labelClassName"
      ></el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  name: "tableSlot",
  props: {
    // 表头数据
    columns: {
      type: Array,
    },
    // 表格数据
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    refTable: {
      type: String,
      default: "table",
    },
    // 加载动画
    loading: {
      type: Boolean,
      default: false,
    },
    // 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件
    // 如果只指定了prop, 没有指定order, 则默认顺序是ascending (ascending, descending)
    defaultSort: {
      type: Object,
    },
    // 表格宽度
    width: {
      type: [String, Number],
      default: "100%",
    },
    // 表格高度
    height: {
      type: [String, Number],
      default: "565px",
    },
    // 表格最大高度
    maxHeight: [String, Number],
    // 单元格的 style 样式 Function({row, column, rowIndex, columnIndex})/String
    // 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
    cellStyle: {
      type: Object,
      // default() {
      //   return {
      //     borderRight: "1px solid white",
      //   };
      // },
    },
    border: {
      type: Boolean,
      default: true,
    },
    // 显示表头
    showHeader: {
      type: Boolean,
      default: true,
    },
    // 列的宽度是否自撑开
    fit: {
      type: Boolean,
      default: true,
    },
    // Table 的尺寸 medium / small / mini
    size: {
      type: String,
      default: "medium",
    },
    // 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
    tableRowClassName: {
      type: [Function, Boolean],
      default: false,
    },
    // 列的 className
    columnClass: {
      type: String,
    },
    // 当前列标题的自定义类名
    labelClassName: {
      type: String,
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    defaultClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "stripe-row";
      }
      return "";
    },
    // 当表格的排序条件发生变化的时候会触发该事件
    sortChange(column, prop, order) {
      this.$emit("sortChange", column, prop, order);
    },
    sortByitem(obj1, obj2) {
      this.$emit("sortByitem", obj1, obj2);
    },
    // 当表格双击触发该事件
    cellDblclick(row, column, cell, event) {
      this.$emit("cellDblclick", row, column, cell, event);
    },
    // 表格行勾选触发该事件
    handleSelectionChange(selection) {
      this.$emit("handleSelectionChange", selection);
    },
  },
};
</script>

<style scoped lang="scss">
.el-table {
  tbody tr:hover > td {
    // 表格触碰样式
    background-color: #f5f7fa;
  }
  background-color: transparent;
  &::before {
    // 表格底部边框
    background: none;
  }
}
</style>
